import React, { ReactNode, memo } from 'react';
import ReactMarkdown, { Components } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { cn } from '@/lib/utils';

interface StreamingMarkdownRendererProps {
  content: string;
  className?: string;
}

const StreamingMarkdownRenderer: React.FC<StreamingMarkdownRendererProps> = memo(({
  content,
  className = '',
}) => {
  const components: Components = {
    p: ({ children }: { children?: ReactNode }) => <p className="mb-4 last:mb-0 leading-relaxed text-base">{children}</p>,
    ul: ({ children }: { children?: ReactNode }) => <ul className="list-disc list-outside my-2 space-y-1 pl-6">{children}</ul>,
    ol: ({ children }: { children?: ReactNode }) => <ol className="list-decimal list-outside my-2 space-y-1 pl-6">{children}</ol>,
    li: ({ children }: { children?: ReactNode }) => <li className="leading-relaxed text-sm mb-1">{children}</li>,
    h1: ({ children }: { children?: ReactNode }) => <h1 className="text-2xl font-bold mt-8 mb-4 text-foreground">{children}</h1>,
    h2: ({ children }: { children?: ReactNode }) => <h2 className="text-xl font-bold mt-6 mb-3 text-foreground">{children}</h2>,
    h3: ({ children }: { children?: ReactNode }) => <h3 className="text-lg font-bold mt-4 mb-2 text-foreground">{children}</h3>,
    h4: ({ children }: { children?: ReactNode }) => <h4 className="text-base font-bold mt-3 mb-2 text-foreground">{children}</h4>,
    h5: ({ children }: { children?: ReactNode }) => <h5 className="text-sm font-bold mt-2 mb-1 text-foreground">{children}</h5>,
    h6: ({ children }: { children?: ReactNode }) => <h6 className="text-xs font-bold mt-2 mb-1 text-foreground">{children}</h6>,
    hr: () => <hr className="my-6 border-border border-t-2" />,
    code({ inline, className, children, ...props }: any) {
      const match = /language-(\w+)/.exec(className || '');
      if (!inline && match) {
        return (
          <SyntaxHighlighter
            style={vscDarkPlus}
            language={match[1]}
            PreTag="div"
            className="bg-gray-800 rounded-lg overflow-x-auto my-3"
            customStyle={{ padding: '1rem', background: '#1e1e1e' }}
            codeTagProps={{ style: { fontFamily: 'monospace', fontSize: '0.875rem' } }}
            {...props}
          >
            {String(children).replace(/\n$/, '')}
          </SyntaxHighlighter>
        );
      }
      return (
        <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono" {...props}>
          {children}
        </code>
      );
    },
    a: ({ children, ...props }: { children?: ReactNode, [key: string]: any }) => (
      <a className="text-primary hover:underline" target="_blank" rel="noopener noreferrer" {...props}>
        {children}
      </a>
    ),
    blockquote: ({ children }: { children?: ReactNode }) => (
      <blockquote className="border-l-4 border-border pl-4 my-4 italic text-muted-foreground">
        {children}
      </blockquote>
    ),
    table: ({ children }: { children?: ReactNode }) => (
      <div className="overflow-x-auto my-4">
        <table className="min-w-full border-collapse border border-border">{children}</table>
      </div>
    ),
    th: ({ children }: { children?: ReactNode }) => (
      <th className="border border-border px-4 py-2 bg-muted font-semibold text-left">{children}</th>
    ),
    td: ({ children }: { children?: ReactNode }) => <td className="border border-border px-4 py-2">{children}</td>,
  };

  return (
    <div className={cn('markdown-content prose dark:prose-invert', className)}>
      <ReactMarkdown
        children={content}
        remarkPlugins={[remarkGfm, remarkBreaks]}
        components={components}
      />
    </div>
  );
});

export default StreamingMarkdownRenderer;